<template>
    <van-nav-bar title="首页" />

    <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item @click="ToCoupon(item.id)" v-for="item in CouponList" :key="item.id">
            <van-image
                width="100%"
                height="180px"
                fit="cover"
                :src="item.thumb_cdn"
            />
        </van-swipe-item>
    </van-swipe>

    <van-grid :border="false" :column-num="4">
        <van-grid-item to="/product" text="全部商品">
            <template #icon>
                <van-image width="50" height="50" src="/assets/images/quanbu.png" />
            </template>
        </van-grid-item>
        <van-grid-item text="商品直播">
            <template #icon>
                <van-image width="50" height="50" src="/assets/images/zhibo.png" />
            </template>
        </van-grid-item>
        <van-grid-item to="/coupon/receive" text="优惠活动">
            <template #icon>
                <van-image width="50" height="50" src="/assets/images/youhui.png" />
            </template>
        </van-grid-item>
        <van-grid-item to="/product/rank" text="榜单排行">
            <template #icon>
                <van-image width="50" height="50" src="/assets/images/bangdan.png" />
            </template>
        </van-grid-item>
    </van-grid>

    <div class="type">新品推荐</div>

    <div class="list">
       <div class="item" v-for="item in ProductList" :key="item.id">
            <router-link :to="{path:'/product/info',query:{proid:item.id}}">
                <div class="thumb">
                    <van-image
                        width="100%"
                        height="150px"
                        fit="cover"
                        :src="item.thumb_text"
                    />
                </div>
                <div class="name">{{ item.name }}</div>
                <div class="box">
                    <div class="price">
                        <span v-if="item.live_price > 0">￥{{ item.live_price }}</span>
                        <span :class="item.live_price ? 'product_price' : ''">￥{{ item.price }}</span>
                    </div>
                    <div class="buy-count">{{ item.buy_count }}人付款</div>
                </div>
                <div class="box">
                    <div class="region">{{ item.region_text }}</div>
                    <div class="chat"><van-icon name="chat-o" color="#ff5000" size="16" /></div>
                </div>

            </router-link>
       </div>
    </div>
</template>

<script setup>
// 选项式 this => proxy
const { proxy } = getCurrentInstance();

const ProductList = ref([]);
const CouponList = ref([]);

onBeforeMount(() => GetHomeData());

const GetHomeData = async () =>
{
    let result = await proxy.$http.post({
        url:'/index/index'
    })

    if(result.code === 1)
    {
        ProductList.value = result.data.ProductList;
        CouponList.value = result.data.CouponList;
    }
}

const ToCoupon = (cid) => proxy.$router.push('/coupon/info?cid='+cid    )
</script>

<style scoped>
@import url('/assets/css/home.css');
</style>